<template>
  <div class="login">
    <div class="content">
      <div class="login-box">
        <p class="title">用户登录</p>
        <form id="loginForm">
          <input
            name="username"
            v-model="username"
            type="text"
            class="username"
            placeholder="用户名或邮箱或手机号"
          />
          <input
            name="password"
            v-model="password"
            type="password"
            class="password"
            placeholder="密码"
          />
          <input
            type="text"
            name="imageTokenName"
            v-model="imageTokenName"
            class="token"
            placeholder="图形验证码"
          />
          &nbsp;
          <img
            id="codeImg"
            :src="tokenImgSrc"
            @click="changeImg"
            style="margin-bottom: -10px;"
          />&nbsp;
          <a href="javascript:void(0);" @click="changeImg" style="text-decoration:none;">看不清</a>
          <br />
          <label class="label">
            记住密码：&nbsp;&nbsp;&nbsp;
            <input
              type="checkbox"
              name="rememberMe"
              v-model="rememberMe"
              class="check_box tui-checkbox"
              checked
              value="true"
            />
          </label>

          <br />
          <el-button type="primary" @click="login()" class="login_btn">立刻登录</el-button>
        </form>
        <div class="login_options">
          <div class="div_a">
            <a>
              <router-link :to="{name: 'register'}">
                <img src="../assets/images/Register.png" />
              </router-link>
            </a>
            <br />去注册
          </div>
          <div class="div_a">
            <a>
              <router-link :to="{name: 'quickLogin'}">
                <img src="../assets/images/PhoneLogin.png" />
              </router-link>
            </a>
            <br />验证码登录
          </div>
          <div class="div_a" @click="githubAuth">
            <a>
              <img src="../assets/images/Github.png" />
            </a>
            <br />github登录
          </div>
          <div class="div_a">
            <a :href="giteeUrl">
              <img src="../assets/images/Gitee.png" />
            </a>
            <br />gitee登录
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import openWindow from "@/utils/open-window";
export default {
  name: "login",
  // 监听enter键， 登录
  mounted() {
    // 绑定enter事件
    this.enterKeyup();
  },
  destroyed() {
    // 销毁enter事件
    this.enterKeyupDestroyed();
  },

  methods: {
    changeImg: function() {
      this.imageTokenName = "";
      this.tokenImgSrc =
        this.GlobalConstants.BASE_URL +
        "token/getImageToken?x=" +
        Math.floor(Math.random() * 100);
    },
    login: function() {
      this.$api.login
        .login({
          username: this.username,
          password: this.password,
          rememberMe: this.rememberMe,
          imageTokenName: this.imageTokenName
        })
        // 成功返回 -- status:200, 非000000返回码皆在response拦截器处理掉
        .then(res => {
          if (!res) {
            this.changeImg();
            return;
          }

          let body = res.body;

          localStorage.setItem("user.name", body.username);
          localStorage.setItem("user.menus", JSON.stringify(body.menus));

          // 正确逻辑处理
          // this.$store.commit("addUserInfo", body);
          this.$router.push("/welcome");
        });
    },

    enterKey(event) {
      const componentName = this.$options.name;
      if (componentName == "login") {
        const code = event.keyCode
          ? event.keyCode
          : event.which
          ? event.which
          : event.charCode;
        if (code == 13) {
          this.login();
        }
      }
    },
    enterKeyupDestroyed() {
      document.removeEventListener("keyup", this.enterKey);
    },
    enterKeyup() {
      document.addEventListener("keyup", this.enterKey);
    },

    githubAuth: function() {
      this.$api.oauth2.githubAuth().then(res => {
        if (!res) {
          return;
        }

        openWindow(res.body, "GitHub授权登录", 540, 540);
        window.addEventListener("message", this.handleGithubAuth, false);
      });
    },
    handleGithubAuth: function(e) {
      var origin = e.origin || e.originalEvent.origin;
      debugger
      if(origin.includes("localhost")) {
        console.log(e.data)
      }
    }
  },
  data() {
    return {
      tokenImgSrc:
        this.GlobalConstants.BASE_URL +
        "token/getImageToken?x=" +
        Math.floor(Math.random() * 100),
      username: "",
      password: "",
      rememberMe: true,
      imageTokenName: "",
      githubUrl: this.GlobalConstants.BASE_URL + "oauth2/code/github",
      giteeUrl: this.GlobalConstants.BASE_URL + "oauth2/code/gitee"
    };
  },
  components: {}
};
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
  border: 0;
}

*:focus {
  outline: none;
}

.login {
  height: 800px;
  width: 100%;
  /* position: absolute; */
  z-index: 2;
  background-color: aquam、arine;
  position: fixed;
}

.login .content {
  background-image: url(../assets/images/pic.png);
  background-repeat: no-repeat;
  background-position: 80px center;
  height: 400px;
  margin-top: 150px;
}

.login .content .login-box {
  background-color: #3f1675;
  float: right;
  height: 400px;
  width: 380px;
  border-radius: 3px;
  margin-top: 24px;
  margin-right: 100px;
}

.login .content .login-box .title {
  font-family: "Microsoft Sans Serif", Arial;
  font-size: 28px;
  line-height: 90px;
  color: #fff;
  text-decoration: none;
  text-align: center;
  display: block;
  width: 100%;
}

.login .content .login-box .username {
  font-family: "Microsoft Sans Serif", Arial;
  font-size: 14px;
  line-height: 32px;
  color: #333;
  background-color: #fff;
  background-image: url(../assets/images/user.png);
  background-repeat: no-repeat;
  background-position: 10px center;
  text-indent: 28px;
  display: block;
  width: 238px;
  height: 32px;
  border: 1px solid #5691cc;
  border-radius: 18px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 10px;
}

.login .content .login-box .password {
  font-family: "Microsoft Sans Serif", Arial;
  font-size: 14px;
  line-height: 32px;
  color: #333;
  background-color: #fff;
  background-image: url(../assets/images/Key.png);
  background-repeat: no-repeat;
  background-position: 10px center;
  text-indent: 28px;
  display: block;
  width: 238px;
  height: 32px;
  border: 1px solid #5691cc;
  border-radius: 18px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 10px;
}

.login .content .login-box .token {
  font-family: "Microsoft Sans Serif", Arial;
  font-size: 14px;
  line-height: 32px;
  color: #333;
  background-image: url(../assets/images/Token.png);
  background-repeat: no-repeat;
  background-position: 10px center;
  text-indent: 28px;
  width: 108px;
  height: 32px;
  border: 1px solid #5691cc;
  border-radius: 18px;
  margin-left: 70px;
  margin-right: auto;
  margin-bottom: 10px;
}

.login .content .login-box .label {
  font-family: "Microsoft Sans Serif", Arial;
  margin-top: 5px;
  margin-left: 72px;
  width: 100px;
  display: block;
  font-size: 14px;
  color: #fff;
  cursor: pointer;
}

.login .content .login-box .login_btn {
  width: 238px;
  height: 39px;
  border: 0.5px solid #fff;
  margin-left: 70px;
  margin-top: -5px;
}

a {
  color: rgb(101, 192, 196);
  text-decoration: underline;
}

.login_options {
  margin-left: 50px;
}

.div_a {
  text-align: center;
  margin-top: 20px;
  margin-left: 20px;
  margin-bottom: 20px;
  float: left;
  font-size: 10px;
  color: #fff;
}
</style>
